<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link href="css/layout.css" rel="stylesheet" media="all">
<title>小天使驾到，拯救流量癌</title>
</head>
<body>
<div class="page">
	 <canvas id="canvas" width="100%" height=""></canvas>
     <img src="images/redbox.png" id="img2" class="hide">
     <img src="images/bi.png" id="img1" class="hide">
     <!--第一页-->
     <div class="one"  style="display:none">
        <p class="font24">
        	摇晃手机<br>
将流量币倒入顶部红包中<br>
        </p>
      </div>

    <!--第二页-->
    <div class="ewm"  style="display:none">
     	<span><img src="images/ewm.png" width="100%"></span>
        <p class="font24">
        <a href="用户A领券页面.html">填写个人手机号码领取流量券奖励</a>
        	你已成功倒出流量币，<br>赶紧让小伙伴扫码接收吧！<br>
快快快~TA要掉地上啦！
        </p>
     </div>
     
     <!--第四页-->
     <div class="ewm" >
     	<span><img src="images/ewm.png" width="100%"></span>
        <p class="font24">
        <b>188888888888</b>
        <a href="用户A领券页面.html">给更多好友发1G流量吧~</a>！
        </p>
     </div>
     
</div>
<!--<div class="two_page"><img src="images/two_page.png" width="100%"></div>-->
<script type="text/javascript">
        var Width = document.documentElement.clientWidth; // 屏幕宽度
        var Height = document.documentElement.clientHeight; // 屏幕高度
        var Factor = {
            gravity: 1, // 重力系数
            bounce: 0.8 // 反弹系数
        };
        var Gravity = {
            x: 0, // 重力x轴分量
            y: 1 // 重力y轴分量
        };
        var Ball = {
            x: 10, // 小球x轴坐标
            y: 0, // 小球y轴坐标
            vx: 0, // 小球x轴速度
            vy: 0, // 小球y轴速度
            width: 131 / 2, // 小球宽度
            height: 135 / 2 // 小球高度
        };
        var Hole = {
            x: Width * 0.4, // 洞x轴坐标
            y: 0, // 洞y轴坐标
            width: Width * 0.4, // 洞宽度
            height: Width * 0.4 / 520 * 135 // 洞高度
        };
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = Width;
        canvas.height = Height;

        var img1 = document.getElementById("img1"); // 小球图片
        var img2 = document.getElementById("img2"); // 洞图片

        var isHit = false; // 是否碰撞
        var isDrop = false; // 是否掉落

        var requestAnimationFrame = window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || function(callback) { return setTimeout(callback, 1000 / 60); };

        function draw() { // 每帧绘制
            ctx.drawImage(img2, Hole.x, Hole.y, Hole.width, Hole.height);
            if (!isDrop)
                ctx.drawImage(img1, Ball.x, Ball.y, Ball.width, Ball.height);
        }

        function clear() {
            ctx.clearRect(0, 0, Width, Height);
        }

        function update() {
            clear();
            draw();

            if (isDrop) return;

            Ball.x += Ball.vx;
            Ball.y += Ball.vy;

            /* 落洞 */
            if (isHit) {
                if (Ball.y + Ball.height <= Hole.y + Hole.height || Ball.y <= 0) {
                    if (Ball.x < Hole.x + Hole.height || Ball.x + Ball.width > Hole.x) {
                        isDrop = true;
                    }
                }
                Ball.vx = 0;
                Ball.vy = -10;
                requestAnimationFrame(update);
                return;
            }

            /* 落体 */
            Ball.vx += Gravity.x * Factor.gravity;
            Ball.vy += Gravity.y * Factor.gravity;

            /* 反弹 */
            if (Ball.x < 0) {
                Ball.x = 0;
                Ball.vx *= -Factor.bounce;
            }
            else if (Ball.x + Ball.width > Width) {
                Ball.x = Width - Ball.width;
                Ball.vx *= -Factor.bounce;
            }
            if (Ball.y < 0) {
                Ball.y = 0;
                Ball.vy *= -Factor.bounce;
            }
            else if (Ball.y + Ball.height > Height) {
                Ball.y = Height - Ball.height;
                Ball.vy *= -Factor.bounce;
            }

            /* 碰撞检测 */
            if (isCollsionWithRect(Ball.x + Ball.width * 0.45, Ball.y + Ball.height * 0.45, Ball.width * 0.1, Ball.height * 0.1, Hole.x, Hole.y, Hole.width, Hole.height)) {
                isHit = true;
            }

            requestAnimationFrame(update);
        }

        /* 矩形碰撞检测 */
        function isCollsionWithRect(x1, y1, w1, h1, x2, y2, w2, h2) {  
            if (x1 >= x2 && x1 >= x2 + w2) {  
                return false;  
            } else if (x1 <= x2 && x1 + w1 <= x2) {  
                return false;  
            } else if (y1 >= y2 && y1 >= y2 + h2) {  
                return false;  
            } else if (y1 <= y2 && y1 + h1 <= y2) {  
                return false;  
            }  
            return true;  
        }

        requestAnimationFrame(update);

        /* 陀螺仪 */
        window.addEventListener("deviceorientation", orientationHandler, true);  
        function orientationHandler(event) {  
            Gravity = {
                x: event.gamma / 90,
                y: event.beta / 90
            }
        }
</script>   
</body>
</html>
